<template>
    <div class="wrapper">
        <div class="wrapperTop">
            <terminalSearch :text="numAll" @listen="listenToChildren"  @reset="reset"></terminalSearch>
        </div>
        <div class="wrapperCenter">
            <div class="content">
                <van-checkbox-group v-model="checked">
                    <empty v-if="!posList.length"></empty>
                    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getFindPageList">
                        <div class="posItem" v-for="item in posList" :key="item.TUSN">
                            <!--                        <van-checkbox :name="item">-->
                            <div class="posInfo" @click.stop="goStatistics1('/posInfo', item)">
                                <div class="left">
                                    <img class="posImg" v-if="item.USE_TYPE == 'DQPOS'" src="@/assets/posImg/dq.jpg" alt="" />
                                    <img class="posImg" v-else src="@/assets/posImg/ct.jpg" alt="" />
                                </div>
                                <div class="right">
                                    <div class="bind">
                                        <div style="font-weight: bold;display: flex;align-items: center">
                                            <text style="margin-right: 10px">{{ item.USE_TYPE_NAME }}-{{ item.COMPONENT_TYPE }}</text>
                                            <img v-if="item.AGENCY_SOURCE === 'LS'" style="height: 20px" src="@/assets/LS.png" />
                                            <img v-if="item.AGENCY_SOURCE === 'HLB'"  style="height: 20px" src="@/assets/hlb.png" />
                                            <img v-if="item.AGENCY_SOURCE === 'QB'" style="height: 20px" src="@/assets/QB.png" />
                                            <img v-if="item.AGENCY_SOURCE === 'UEN'"  style="height: 20px" src="@/assets/HK.png" />
                                        </div>
                                        <div
                                            class="btn"
                                            :style="{ background: item.STATUS === 'TRANS' ? '#09C22E' : '#FB5151', color: '#ffffff' }"
                                        >
                                            <img
                                                src="@/assets/index/lianjie.png"
                                                style="width: 10px; heigth: 10px; vertical-align: baseline"
                                                alt=""
                                            />
                                            {{ item.STATUS === 'TRANS' ? '已绑定' : '未绑定' }}
                                        </div>
                                    </div>
                                    <div class="bind">
                                        <div>
                                            机构：{{item.AGENCY_SOURCE_NAME}}
                                        </div>
                                    </div>
                                    <div v-if="item.ACT_NAME">活动：{{ item.ACT_NAME }}</div>
                                    <div style="display: flex; align-items: center" @click.stop="copy(item.TUSN)">
                                        TUSN：{{ item.TUSN }}
                                        <img src="@/assets/copy.png" alt="" style="width: 13px; margin-left: 10px" />
                                    </div>
                                    <div
                                        v-if="item.AGENCY_SOURCE !== 'HX' && item.POS_SN"
                                        style="display: flex; align-items: center"
                                        @click.stop="copy(item.POS_SN)"
                                    >
                                        终端SN：{{ item.POS_SN }}
                                        <img src="@/assets/copy.png" alt="" style="width: 13px; margin-left: 10px" />
                                    </div>
                                    <div class="bind">
                                        <div>
                                            是否唤醒：
                                            <span :style="{ color: item.IS_ACTIVATE == 'Y' ? '#09C22E' : '#FB5151' }">
                                                {{ item.IS_ACTIVATE == 'Y' ? '已唤醒' : '未唤醒' }}
                                            </span>
                                        </div>
                                        <div v-if="item.STATUS === 'TRANS'" class="button" @click.stop="unbind(item)">解绑</div>
                                    </div>
                                   
                                </div>
                            </div>
                            <!--                        </van-checkbox>-->
                        </div>
                    </van-list>
                </van-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script>
import terminalSearch from '@/components/terminal-search.vue'
import { findPageList, findPageListCount, unbindApi } from '@/api/posManagement'
import clipboard from 'clipboard'
import { showDialog, showToast, showSuccessToast } from 'vant'
export default defineComponent({
    name: 'admin',
    setup() {
        const router = useRouter()
        const state = reactive({
            childData: {
			},
            loading: false,
            finished: false,
            currentPage: 1,
            checked: [],
            numAll: '',
            posList: []
        })
        const getFindPageList = () => {
            findPageList({
                currentPage: state.currentPage,
                posSnOrTusn: state.childData.tusn,
                ...state.childData
            }).then(res => {
                if (res.object.length < 10) {
                    state.finished = true
                    state.loading = true
                } else {
                    state.currentPage++
                    state.finished = false
                    state.loading = false
                }
                state.posList = state.posList.concat(res.object)
            })
        }
        const copy = e => {
            let domInput = document.createElement('input')
            domInput.value = e
            document.body.appendChild(domInput) // 添加input节点
            domInput.select() // 选择对象;
            document.execCommand('Copy') // 执行浏览器复制命令
            showToast('复制成功')
            domInput.remove()
        }
        const goStatistics1 = (url, item) => {
            router.push({
                path: url,
                query: {
                    tusn: item.TUSN
                }
            })
        }
        const listenToChildren = val => {
            state.childData = val
            state.posList = []
            state.currentPage = 1
            state.finished = true
            state.loading = true
            getFindPageList()
        }
        const reset = val => {

        }
        const unbind = item => {
            showDialog({
                message: '辛辛苦苦拓展的商户，请确定解绑终端吗？',
                title: '解绑终端',
                showCancelButton: true
            }).then(() => {
                unbindApi({
                    tusn: item.TUSN,
                    posSn: item.POS_SN,
                    customerNo: item.CUSTOMER_NO
                }).then(res => {
                    showSuccessToast('解绑成功')
                    getFindPageList()
                })
            })
        }

        return {
            ...toRefs(state),
            listenToChildren,
            reset,
            getFindPageList,
            copy,
            unbind,
            goStatistics1
        }
    }
})
</script>
<style scoped lang="scss">
.btn {
    width: 60px;
    border-radius: 10px;
    text-align: center;
    font-size: 10px;
}
.wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    .wrapperTop {
    }
    .wrapperCenter {
        flex: 1;
        overflow: scroll;
    }
}
.content {
    padding: 0 10px;
    .posItem {
        background: #ffffff;
        opacity: 1;
        border-radius: 6px;
        padding: 10px;
        display: flex;
        margin-top: 10px;
        align-items: center;
        .posInfo {
            flex: 1;
            display: flex;
            align-items: center;
            font-size: 15px;
            font-family: 'Avenir', Helvetica, Arial, sans-serif;
            .left {
                img {
                    width: 38px;
                }
            }
            .right {
                padding-left: 10px;
                line-height: 25px;
                flex: 1;
                .bind {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .button {
                        padding: 0 10px;
                        border: 1px solid #66d6ff;
                        opacity: 1;
                        border-radius: 4px;
                    }
                }
            }
        }
    }
}
</style>
<style>
.van-checkbox {
    width: 100%;
}
.van-checkbox__label {
    flex: 1;
}
</style>
